﻿<%@ Page Title="类别管理" Language="C#" MasterPageFile="~/Admins/Admin.Master" AutoEventWireup="true" CodeBehind="Category.aspx.cs" Inherits="WebApp.Admins.Category" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <h3>类别管理</h3>

    <div class="container" ng-app="myApp" ng-controller="userCtrl">
        <div class="form-inline">
            <button type="button" class="btn btn-lg btn-primary" ng-click="edited('new')">添加</button>
            <input class="pull-right form-control" ng-model="test" />
        </div>

        <table class="table table-hover table-striped table-bordered">
            <thead>
                <tr>
                    <th>编辑</th>
                    <th>名称</th>
                    <th>URL地址</th>
                    <th>排序</th>
                    <th>上级名称</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="category in categorys|filter:test">
                    <td>
                        <button type="button" class="btn" ng-click="edited(category.CategoryId)">
                            <span class="glyphicon glyphicon-pencil"></span>编辑
                        </button>
                    </td>
                    <td>{{ category.CategoryName }}</td>
                    <td>{{ category.CategoryUrl }}</td>
                    <td>{{ category.Sort }}</td>
                    <td>{{ findParent(category.Parent) }}</td>
                    <td>
                        <button type="button" class="btn" ng-click="delete(category.CategoryId)">
                            <span class="glyphicon glyphicon-trash"></span>删除
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 模态框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            ×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">{{edit?"编辑":"添加"}}
                        </h4>
                    </div>
                    <div class="form-horizontal">

                        <div class="form-group">
                            <label for="CategoryName" class="col-sm-2 control-label">类别名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="CategoryName" ng-model="CategoryName" placeholder="请输入名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="CategoryUrl" class="col-sm-2 control-label">URL地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="CategoryUrl" ng-model="CategoryUrl" placeholder="请输入URL地址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Sort" class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="Sort" ng-model="Sort" placeholder="请输入排序">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Parent" class="col-sm-2 control-label">上级名称</label>
                            <div class="col-sm-10">
                                <select class="form-control" ng-model="Parent" id="Parent">
                                    <option value="00000000-0000-0000-0000-000000000000">顶级</option>
                                    <option ng-repeat="category in categorys" value="{{category.CategoryId}}">{{category.CategoryName}}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer left">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            关闭
                        </button>
                        <button type="button" class="btn btn-primary" ng-click="save()">
                            保存数据
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        angular.module('myApp', []).controller('userCtrl', function ($scope, $http) {
            $scope.CategoryId = '';
            $scope.CategoryName = '';
            $scope.CategoryUrl = '';
            $scope.Parent = '';
            $scope.Sort = '';
            $http.get("/api/Category/GetAll").then(
                function (response) {
                    $scope.categorys = response.data;
                });

            $scope.edit = true;
            $scope.error = false;
            $scope.incomplete = false;
            $scope.edited = function (id) {
                $('#myModal').modal('show');
                if (id == 'new') {
                    $scope.edit = false;
                    $scope.CategoryId = '';
                    $scope.CategoryName = '';
                    $scope.CategoryUrl = '';
                    $scope.Parent = '';
                    $scope.Sort = '';
                } else {
                    $scope.edit = true;
                    var index = $scope.findIndex(id);
                    var category = $scope.categorys[index];
                    $scope.CategoryId = category.CategoryId;
                    $scope.CategoryName = category.CategoryName;
                    $scope.CategoryUrl = category.CategoryUrl;
                    $scope.Parent = category.Parent;
                    $scope.Sort = category.Sort;
                }
            };

            $scope.save = function () {
                var categoryNew = {};
                if ($scope.CategoryId == "" || $scope.CategoryId == undefined) {
                    $scope.CategoryId = $scope.guid();
                }
                categoryNew.CategoryId = $scope.CategoryId;
                categoryNew.CategoryName = $scope.CategoryName
                categoryNew.CategoryUrl = $scope.CategoryUrl;
                categoryNew.Parent = $scope.Parent;
                categoryNew.Sort = $scope.Sort;

                $http.post('/api/Category/Exists', categoryNew).then(
                function (response) {
                    if (response.data) {
                        alert('名称已经存在');
                    }
                    else {
                        $http.post('/api/Category/Save', categoryNew).then(
                            function (response) {
                                if ($scope.edit) {
                                    var index = $scope.findIndex($scope.CategoryId);
                                    var category = $scope.categorys[index];
                                    category.CategoryName = $scope.CategoryName
                                    category.CategoryUrl = $scope.CategoryUrl;
                                    category.Parent = $scope.Parent;
                                    category.Sort = $scope.Sort;
                                }
                                else $scope.categorys.push(categoryNew);
                            });
                        $('#myModal').modal('hide');
                    }
                });


            }

            $scope.delete = function (id) {
                if (confirm("确认删除吗?"))
                    $http.post('/api/Category/Delete?id=' + id).then(
                        function (response) {
                            var index = $scope.findIndex(id);
                            $scope.categorys.splice(index, 1);
                        });
            }

            $scope.findParent = function (id) {
                var index = $scope.findIndex(id);
                if (index >= 0)
                    return $scope.categorys[index].CategoryName;
                else return "顶级";
            }

            $scope.findIndex = function (id) {
                for (var i in $scope.categorys) {
                    var category = $scope.categorys[i];
                    if (category.CategoryId == id) {
                        return i;
                    }
                }
            }

            $scope.guid = function () {
                var guid = '';
                $.ajax({
                    url: '/api/Tools/GetGUID', type: "GET", async: false, success: function (response) {
                        guid = response;
                    }
                });
                return guid;
            }

        })

    </script>


</asp:Content>
